<template>
  <div class="h-full front">
    <div class="h-full">
      <div v-if="step == 1" class="box">
        <!-- 第一步接口注册 -->
        <el-form
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="100px"
          :model="ruleForm"
          :rules="rules"
          :style="{ width: `${Number(getWidth)}px` }"
        >
          <el-form-item :label="translateTitle('Dams.ProcssConfig.消息集')" prop="MESSAGE_GROUP_ID">
            <el-input v-model="ruleForm.MESSAGE_GROUP_ID" :placeholder="translateTitle('Dams.ProcssConfig.请选择')" :readonly="true">
              <template #append>
                <el-button @click="clickOpen1">
                  <img alt="" src="@/assets/wms_images/selectLayerNew_more.png" />
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.接口编码')" prop="MESSAGE_ID">
            <el-input v-model="ruleForm.MESSAGE_ID" :placeholder="translateTitle('Dams.ProcssConfig.请选择')" :readonly="true">
              <template #append>
                <el-button @click="clickOpen2">
                  <img alt="" src="@/assets/wms_images/selectLayerNew_more.png" />
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.接口描述')" prop="INTERFACE_DESC">
            <el-input v-model="ruleForm.INTERFACE_DESC" :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.所属系统')" prop="ASSOCIATION_SYSTEM">
            <!-- <el-input v-model="ruleForm.system" /> -->
            <el-select v-model="ruleForm.ASSOCIATION_SYSTEM" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
              <el-option v-for="item in systemOptions" :key="item.APP_CODE" :label="item.APP_NAME" :value="item.APP_CODE" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item class="text-center">
            <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <div v-if="step == 2" class="box">
        <!-- 入向参数设置 -->
        <el-form
          ref="inboundForm"
          class="inbound-ruleForm"
          label-width="110px"
          :model="inboundForm"
          :rules="inboundRules"
          :style="{ width: `${Number(getWidth)}px` }"
        >
          <el-form-item :label="translateTitle('Dams.ProcssConfig.接口类型')" prop="DATA_ACTION">
            <el-select v-model="inboundForm.DATA_ACTION" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')" @change="dataChange">
              <el-option v-for="item in portType" :key="item.value" :label="item.desc" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否记录日志" prop="LOG_FLAG">
            <!-- <el-input v-model="inboundForm.LOG_FLAG" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" /> -->
            <el-switch v-model="inboundForm.LOG_FLAG" active-value="Y" inactive-value="N" />
          </el-form-item>
          <el-form-item v-if="getlabel" :label="getlabel" prop="DATA_JNDI_NAME">
            <el-input v-model="inboundForm.DATA_JNDI_NAME" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.日志过期时间')">
            <!-- <el-input v-model="inboundForm.LOG_EXPIRE_TIME" clearable placeholder="请输入" /> -->
            <el-input-number
              v-model="inboundForm.LOG_EXPIRE_TIME"
              controls-position="right"
              :max="999"
              :min="1"
              :placeholder="translateTitle('Dams.ProcssConfig.请输入')"
            />
            <span>{{ translateTitle('Dams.ProcssConfig.小时') }}</span>
          </el-form-item>
          <el-form-item v-if="dbconfig.indexOf(inboundForm.DATA_ACTION) == -1" :label="translateTitle('Dams.ProcssConfig.报文节点')">
            <template #label>
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.报文节点') }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          {{
                            `${translateTitle('Dams.ProcssConfig.如果请求的业务数据在请求头中')},${translateTitle(
                              'Dams.ProcssConfig.则此处填写对应的key'
                            )}`
                          }}
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="inboundForm.DATA_PARAM" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}1`">
            <template #label v-if="inboundForm.DATA_ACTION == '51' || inboundForm.DATA_ACTION == '55' || inboundForm.DATA_ACTION == '57'">
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.自定义参数') + 1 }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          {{ customOne }}
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="inboundForm.DATA_PARAM1" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}2`">
            <template #label v-if="inboundForm.DATA_ACTION == '51'">
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.自定义参数') + 2 }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          {{ customTwo }}
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="inboundForm.DATA_PARAM2" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}3`">
            <el-input v-model="inboundForm.DATA_PARAM3" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}4`">
            <el-input v-model="inboundForm.DATA_PARAM4" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}5`">
            <el-input v-model="inboundForm.DATA_PARAM5" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <!-- <el-form-item class="text-center">
            <el-button>上一步</el-button>
            <el-button type="primary" @click="submitForm('inboundForm')">下一步</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <div v-if="step == 3" class="box">
        <!-- 入向报文设置 -->
        <div v-if="dbconfig.indexOf(inboundForm.DATA_ACTION) > -1 && !openAnalysis" class="h-full">
          <!-- DB时的层级表单 -->
          <el-form
            ref="inboundForm"
            class="inbound-ruleForm"
            label-width="110px"
            :model="inboundMsgForm"
            :rules="inboundMsgRules"
            :style="{ width: `${Number(getWidth)}px` }"
          >
            <el-form-item :label="translateTitle('Dams.ProcssConfig.报文层级')" prop="MESSAGE_TYPE">
              <el-select v-model="inboundMsgForm.MESSAGE_TYPE" disabled :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
                <el-option v-for="item in hierarchyList" :key="item.value" :label="item.key" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="translateTitle('Dams.ProcssConfig.是否有子层级')">
              <el-switch v-model="inboundMsgForm.isChild" active-value="Y" inactive-value="N" />
            </el-form-item>
            <el-form-item v-if="inboundMsgForm.MESSAGE_TYPE == 'H'" :label="translateTitle('Dams.ProcssConfig.预调用SP')">
              <el-input v-model="inboundMsgForm.PRE_SP" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
            </el-form-item>
            <el-form-item :label="translateTitle('Dams.ProcssConfig.层级关联字段')">
              <template #label>
                <span>
                  <span>
                    <span>{{ translateTitle('Dams.ProcssConfig.层级关联字段') }}</span>
                    <span style="font-size: 12px; color: #af3636">
                      <span>
                        <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                          <template
                            #content
                            :style="{
                              color: '#000',
                            }"
                          >
                            字段以"="连接，多个字段以 "/"隔开，如:ORG_ID=ORG_ID/SO_NO=SO_NO
                          </template>
                          <vui-icon icon="question-fill" />
                        </el-tooltip>
                      </span>
                    </span>
                  </span>
                </span>
              </template>
              <el-input v-model="inboundMsgForm.LOCAL_KEY_FIELD" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
            </el-form-item>
            <el-form-item :label="translateTitle('Dams.ProcssConfig.消息提取SQL')" style="width: 100%">
              <CodeEditor :ref="'VuiCodeEditor_'" v-model="inboundMsgForm.SELECT_SQL" />
              <el-button type="primary" @click="verifySql">{{ translateTitle('Dams.ProcssConfig.校验SQL') }}</el-button>
            </el-form-item>
            <el-form-item v-if="inboundMsgForm.MESSAGE_TYPE == 'H'" :label="translateTitle('Dams.ProcssConfig.报文回写主键')">
              <template #label>
                <span>
                  <span>
                    <span>{{ translateTitle('Dams.ProcssConfig.报文回写主键') }}</span>
                    <span style="font-size: 12px; color: #af3636">
                      <span>
                        <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                          <template
                            #content
                            :style="{
                              color: '#000',
                            }"
                          >
                            多个主键以 "/"隔开，如:XX/YY
                          </template>
                          <vui-icon icon="question-fill" />
                        </el-tooltip>
                      </span>
                    </span>
                  </span>
                </span>
              </template>
              <el-input v-model="inboundMsgForm.KEY_FIELD" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
            </el-form-item>
            <el-form-item v-if="inboundMsgForm.MESSAGE_TYPE == 'H'" :label="translateTitle('Dams.ProcssConfig.回写标识字段')">
              <template #label>
                <span>
                  <span>
                    <span>{{ translateTitle('Dams.ProcssConfig.回写标识字段') }}</span>
                    <span style="font-size: 12px; color: #af3636">
                      <span>
                        <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                          <template
                            #content
                            :style="{
                              color: '#000',
                            }"
                          >
                            表名.字段名，多个以下划线隔开，如: aa.EDI_SEND_FLAG1/aa.EDI_SEND_TIME1
                          </template>
                          <vui-icon icon="question-fill" />
                        </el-tooltip>
                      </span>
                    </span>
                  </span>
                </span>
              </template>
              <el-input v-model="inboundMsgForm.FLAG_FIELD" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
            </el-form-item>
            <el-form-item v-if="inboundMsgForm.MESSAGE_TYPE == 'H'" :label="translateTitle('Dams.ProcssConfig.回写值')">
              <template #label>
                <span>
                  <span>
                    <span>{{ translateTitle('Dams.ProcssConfig.回写值') }}</span>
                    <span style="font-size: 12px; color: #af3636">
                      <span>
                        <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                          <template
                            #content
                            :style="{
                              color: '#000',
                            }"
                          >
                            回写值对应回写标识字段，多个以 "/"隔开，如: R/SYSDATE
                          </template>
                          <vui-icon icon="question-fill" />
                        </el-tooltip>
                      </span>
                    </span>
                  </span>
                </span>
              </template>
              <el-input v-model="inboundMsgForm.RETURN_VALUES" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="openAnalysis" class="h-full" :style="{ width: `${Number(getWidth)}px` }">
          <div>
            <div class="flex justify-between" style="padding: 10px 5px; background-color: #f4f5f7; color: #4e5969">
              <span>{{ dbconfig.indexOf(inboundForm.DATA_ACTION) > -1 ? '响应报文' : translateTitle('Dams.ProcssConfig.入向报文') }}</span>
              <el-button type="primary" @click="analysis">{{ translateTitle('Dams.ProcssConfig.解析') }}</el-button>
            </div>
            <div>
              <CodeEditor v-model="outgoingMessage" />
            </div>
          </div>
          <div v-if="isAnalysis">
            <!-- DB时解析后的节点元素表 -->
            <vxe-table
              v-if="DBlist.length > 0 && dbconfig.indexOf(inboundForm.DATA_ACTION) > -1"
              ref="xTable"
              border
              :column-config="{ resizable: true }"
              :data="DBlist"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
              height="400"
              :row-config="{ isCurrent: true, isHover: true }"
              show-overflow
              size="mini"
            >
              <vxe-column align="center" field="name" fixed="left" :title="translateTitle('Dams.ProcssConfig.报文解析结果')" />
              <vxe-column align="center" :title="translateTitle('Dams.ProcssConfig.最终响应字段')">
                <template #header>
                  <span>
                    <span>
                      <span>{{ translateTitle('Dams.ProcssConfig.最终响应字段') }}</span>
                      <span style="font-size: 12px; color: #af3636">
                        <span>
                          <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                            <template
                              #content
                              :style="{
                                color: '#000',
                              }"
                            >
                              表名.字段名,如:XX.EDI_SEND_FLAG1
                            </template>
                            <vui-icon icon="question-fill" />
                          </el-tooltip>
                        </span>
                      </span>
                    </span>
                  </span>
                </template>
                <template #default="{ row }">
                  <el-input v-model="row.WEB_RETURN_FIELDS" type="text" />
                </template>
              </vxe-column>
              <vxe-column align="center" :title="translateTitle('Dams.ProcssConfig.转义标识')">
                <template #header>
                  <span>
                    <span>
                      <span>{{ translateTitle('Dams.ProcssConfig.转义标识') }}</span>
                      <span style="font-size: 12px; color: #af3636">
                        <span>
                          <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                            <template
                              #content
                              :style="{
                                color: '#000',
                              }"
                            >
                              如果响应报文当前字段返回值为 000,则最终响应字段字段标记为为Y,否则标记为W ，需配置为:"000/Y/W
                            </template>
                            <vui-icon icon="question-fill" />
                          </el-tooltip>
                        </span>
                      </span>
                    </span>
                  </span>
                </template>
                <template #default="{ row }">
                  <el-switch
                    v-model="row.identification"
                    active-value="Y"
                    :disabled="row.disabled"
                    inactive-value="N"
                    @change="identificationChange"
                  />
                </template>
              </vxe-column>
              <vxe-column align="center" :title="translateTitle('Dams.ProcssConfig.转义标记')">
                <template #default="{ row }">
                  <el-input v-model="row.WEB_RETURN_SUCCESS" :disabled="row.identification != 'Y'" type="text" />
                </template>
              </vxe-column>
              <vxe-column align="center" :title="translateTitle('Dams.ProcssConfig.是否生效')">
                <template #default="{ row }">
                  <el-switch v-model="row.ACTIVE_FLAG" active-value="Y" inactive-value="N" />
                </template>
              </vxe-column>
            </vxe-table>
            <!-- 非DB时解析后的节点元素表（树形） -->
            <vxe-table
              v-if="tableList.length > 0 && dbconfig.indexOf(inboundForm.DATA_ACTION) == -1"
              ref="xTable_notDb"
              border
              class="tree-table-list"
              :column-config="{ resizable: true }"
              :data="tableList"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
              height="400"
              :row-config="{ isCurrent: true, isHover: true }"
              show-overflow
              size="mini"
              :tree-config="tableTreeConfig"
            >
              <vxe-column field="name" fixed="left" :min-width="treeNodeWidth" :title="translateTitle('Dams.ProcssConfig.节点')" tree-node>
                <template #default="{ row }">
                  <el-input v-if="row.isAdd" v-model="row.name" disabled />
                  <span v-else>{{ row.name }}</span>
                </template>
              </vxe-column>
              <vxe-column field="STD_FIELD" min-width="200" :title="translateTitle('Dams.ProcssConfig.层级关联条件')">
                <template #default="{ row }">
                  <el-input v-if="row.isNode == 'Y' && row.hasElements == 'Y' && row.level && row.level != 'H'" v-model="row.conditions" />
                </template>
              </vxe-column>
              <vxe-column field="STD_FIELD" min-width="200" :title="translateTitle('Dams.ProcssConfig.来源字段')">
                <template #default="{ row }">
                  <el-input v-if="row.isNode == 'N'" v-model="row.STD_FIELD" @input="sourceChange(row)" />
                </template>
              </vxe-column>
              <vxe-column field="xpath" min-width="200" title="XPATH">
                <template #default="{ row }">
                  <el-input v-if="row.isAdd" v-model="row.xpath" />
                  <span v-else-if="row.isNode == 'N'">{{ row.xpath }}</span>
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="100" :title="translateTitle('Dams.ProcssConfig.是否响应字段')">
                <template #default="{ row }">
                  <el-switch v-if="row.isNode == 'N'" v-model="row.ADAPTER_TYPE" active-value="R" inactive-value="I" />
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="100" :title="translateTitle('Dams.ProcssConfig.默认值')">
                <template #default="{ row }">
                  <el-input v-if="row.isNode == 'N'" v-model="row.NODE_VALUE" type="text" />
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="100" :title="translateTitle('Dams.ProcssConfig.字段类型')">
                <template #default="{ row }">
                  <el-select v-if="row.isNode == 'N'" v-model="row.DATA_TYPE" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
                    <el-option v-for="item in strType" :key="item.key" :label="item.value" :value="item.key" />
                  </el-select>
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="100" :title="translateTitle('Dams.ProcssConfig.字段长度')">
                <template #default="{ row }">
                  <el-input v-if="row.isNode == 'N'" v-model="row.DATA_WIDTH" type="text" />
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="100" :title="translateTitle('Dams.ProcssConfig.字段层级')">
                <template #default="{ row }">
                  <el-select
                    v-if="row.isNode == 'Y' && row.hasElements == 'Y'"
                    v-model="row.level"
                    clearable
                    :placeholder="translateTitle('Dams.ProcssConfig.请选择')"
                    @change="levelChange(row)"
                  >
                    <el-option v-for="item in hierarchyList" :key="item.value" :label="item.value" :value="item.value" />
                  </el-select>
                  <span v-else>{{ row.level }}</span>
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="70" :title="translateTitle('Dams.ProcssConfig.是否允许为空')">
                <template #default="{ row }">
                  <el-switch v-if="row.isNode == 'N'" v-model="row.ALLOW_EMPTY_FLAG" active-value="Y" inactive-value="N" />
                </template>
              </vxe-column>
              <vxe-column align="center" min-width="70" :title="translateTitle('Dams.ProcssConfig.是否激活')">
                <template #default="{ row }">
                  <el-switch v-if="row.isNode == 'N'" v-model="row.ACTIVE_FLAG" active-value="Y" inactive-value="N" />
                </template>
              </vxe-column>
              <vxe-column align="center" field="ADD_TIME" :title="translateTitle('Dams.ProcssConfig.操作')" width="180">
                <template #default="{ row }">
                  <el-button v-if="row.isNode == 'Y' && row.hasElements == 'Y'" type="text" @click="notDbAdd(row)">
                    <vui-icon icon="add-circle-line" />
                    {{ translateTitle('Dams.ProcssConfig.新增') }}
                  </el-button>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </div>
      </div>
      <div v-if="step == 4" class="box">
        <!-- 出向参数设置 -->
        <el-form
          ref="outFormForm"
          class="outForm-ruleForm"
          label-width="130px"
          :model="outFormForm"
          :rules="outFormRules"
          :style="{ width: `${Number(getWidth)}px` }"
        >
          <el-form-item :label="translateTitle('Dams.ProcssConfig.接口类型')" prop="OUT_DATA_ACTION">
            <el-select v-model="outFormForm.OUT_DATA_ACTION" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
              <el-option v-for="item in portType" :key="item.value" :label="item.desc" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.出向地址')" prop="OUT_JNDI_NAME">
            <el-input v-model="outFormForm.OUT_JNDI_NAME" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item v-if="outFormForm.OUT_DATA_ACTION == '99'" :label="translateTitle('Dams.ProcssConfig.自定义入口')" prop="OUT_JNDI_NAME">
            <el-input v-model="outFormForm.OUT_USER_CLASS" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <!-- 只是开关，不必向后端传递，如果开就有第六步 -->
          <el-form-item :label="translateTitle('Dams.ProcssConfig.是否回调')">
            <el-switch v-model="outFormForm.isChild" active-value="Y" inactive-value="N" />
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.流水号规则')">
            <el-select v-model="outFormForm.GET_DOC_NO_TYPE" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
              <el-option v-for="item in serialNumber" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item v-if="outFormForm.OUT_DATA_ACTION == '40'" :label="translateTitle('Dams.ProcssConfig.后置SP名')">
            <el-input v-model="outFormForm.VALUE_STR01" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item v-if="outFormForm.OUT_DATA_ACTION == '40'" :label="translateTitle('Dams.ProcssConfig.后置SP参数')">
            <template #label>
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.后置SP参数') }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          SP参数支持三种类型：#{code} sp入参，通过code匹配VO对象内部字段获取值,${code} sp出参，SP执完毕，将指定下标的出参写入VO对象
                          code sp常量入参，直接使用常量传参进入SP,如: MESSAGEGROUPSYSID,EDI
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="outFormForm.VALUE_STR02" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item v-if="outFormForm.OUT_DATA_ACTION == '40'" :label="translateTitle('Dams.ProcssConfig.后置SP转义标识')">
            <template #label>
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.后置SP转义标识') }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          SP响应结果转义模板,如 “code?OOOO匹配code对应的返回值，等于0000，则认为处理成功，否则标记此消息处理失败
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="outFormForm.VALUE_STR03" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item> -->
          <el-form-item :label="translateTitle('Dams.ProcssConfig.消息批量标识')">
            <el-switch v-model="outFormForm.BATCH_FLAG" active-value="Y" inactive-value="N" />
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.增删改标识')">
            <!-- <el-switch v-model="outFormForm.IDU_FLAG" active-value="Y" inactive-value="N" /> -->
            <el-select v-model="outFormForm.IDU_FLAG" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
              <el-option v-for="item in aduFlag" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="outFormForm.OUT_DATA_ACTION == '20'" :label="translateTitle('Dams.ProcssConfig.SOAP版本号')">
            <el-input v-model="outFormForm.SOAP_VERSION" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="translateTitle('Dams.ProcssConfig.响应模式')">
            <!-- <el-input v-model="outFormForm.RESPONSE_MODEL" clearable placeholder="请输入" /> -->
            <el-select v-model="outFormForm.RESPONSE_MODEL" clearable :placeholder="translateTitle('Dams.ProcssConfig.请选择')">
              <el-option v-for="item in responsePattern" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="outFormForm.OUT_DATA_ACTION == '01' || outFormForm.OUT_DATA_ACTION == '10'"
            :label="translateTitle('Dams.ProcssConfig.HTTP超时配置')"
          >
            <template #label>
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.HTTP超时配置') }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          {{ `${translateTitle('Dams.ProcssConfig.请求超时毫秒')} /${translateTitle('Dams.ProcssConfig.读取超时毫秒')}` }}
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="outFormForm.HTTP_CONFIG" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item
            v-if="outFormForm.OUT_DATA_ACTION == '01' || outFormForm.OUT_DATA_ACTION == '10'"
            :label="translateTitle('Dams.ProcssConfig.重发设置')"
          >
            <template #label>
              <span>
                <span>
                  <span>{{ translateTitle('Dams.ProcssConfig.重发设置') }}</span>
                  <span style="font-size: 12px; color: #af3636">
                    <span>
                      <el-tooltip effect="dark" placement="top" style="diaplay: inline">
                        <template
                          #content
                          :style="{
                            color: '#000',
                          }"
                        >
                          {{ `${translateTitle('Dams.ProcssConfig.次数')}/${translateTitle('Dams.ProcssConfig.间隔毫秒数')}` }}
                        </template>
                        <vui-icon icon="question-fill" />
                      </el-tooltip>
                    </span>
                  </span>
                </span>
              </span>
            </template>
            <el-input v-model="outFormForm.RESEND_CONFIG" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}1`">
            <el-input v-model="outFormForm.OUT_PARAM1" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}2`">
            <el-input v-model="outFormForm.OUT_PARAM2" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}3`">
            <el-input v-model="outFormForm.OUT_PARAM3" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}4`">
            <el-input v-model="outFormForm.OUT_PARAM4" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
          <el-form-item :label="`${translateTitle('Dams.ProcssConfig.自定义参数')}5`">
            <el-input v-model="outFormForm.OUT_PARAM5" clearable :placeholder="translateTitle('Dams.ProcssConfig.请输入')" />
          </el-form-item>
        </el-form>
      </div>
      <div class="text-center btns">
        <el-button v-if="step != '1'" @click="lastStep">{{ translateTitle('Dams.ProcssConfig.上一步') }}</el-button>
        <el-button type="primary" @click="submitForm" :loading="nextLoading">{{ translateTitle('Dams.ProcssConfig.下一步') }}</el-button>
      </div>
    </div>
    <teleport to="body">
      <VuiModal v-if="dialogTableVisible" v-model="dialogTableVisible">
        <template #title>{{ isOrganization ? translateTitle('Dams.ProcssConfig.消息集') : translateTitle('Dams.ProcssConfig.接口编码') }}</template>
        <div>
          <el-form ref="searchForm" class="searchForm-modal" :inline="true" label-position="top" :model="subForm" style="margin-bottom: 10px">
            <el-form-item :label="presentModal.subFormObj.coding.label">
              <el-input
                v-model="subForm[presentModal.subFormObj.coding.value]"
                clearable
                :placeholder="translateTitle('Dams.ProcssConfig.请输入')"
                size="small"
              />
            </el-form-item>
            <el-form-item :label="presentModal.subFormObj.name.label">
              <el-input
                v-model="subForm[presentModal.subFormObj.name.value]"
                clearable
                :placeholder="translateTitle('Dams.ProcssConfig.请输入')"
                size="small"
              />
            </el-form-item>
            <el-form-item :label="translateTitle('Dams.ProcssConfig.是否有效')">
              <el-switch v-model="subForm.ACTIVE_FLAG" active-value="Y" inactive-value="N" />
            </el-form-item>
            <el-form-item style="display: flex; align-items: flex-end">
              <el-button style="margin-bottom: 5px" type="primary" @click="searchForm">{{ translateTitle('Dams.ProcssConfig.查询') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <vxe-table ref="xTable" border :data="tableData" height="400" :row-config="{ isCurrent: true, isHover: true }" size="mini">
          <vxe-column type="radio" width="70" />
          <vxe-column field="" title="">
            <template #header>
              <vui-icon class="cursor-pointer" icon="add-circle-fill" style="color: #3270ff; font-size: 23px" @click="addOrganization" />
            </template>
            <template #default="{ row, rowIndex }">
              <vui-icon
                class="cursor-pointer"
                icon="indeterminate-circle-fill"
                style="color: #f65c5c; font-size: 23px"
                @click="deleteOrganization(row, rowIndex)"
              />
            </template>
          </vxe-column>
          <vxe-column :field="presentModal.subFormObj.coding.value" :title="presentModal.subFormObj.coding.label" width="200">
            <template #default="{ row }">
              <span v-if="row.ADD_TIME">{{ row[presentModal.subFormObj.coding.value] }}</span>
              <el-input v-else v-model="row[presentModal.subFormObj.coding.value]" clearable type="text" />
              <!-- <span v-else>{{ row[presentModal.subFormObj.coding.value] }}</span> -->
            </template>
          </vxe-column>
          <vxe-column :field="presentModal.subFormObj.name.value" :title="presentModal.subFormObj.name.label" width="200">
            <template #default="{ row }">
              <el-input v-model="row[presentModal.subFormObj.name.value]" clearable type="text" />
            </template>
          </vxe-column>
          <vxe-column :field="presentModal.subFormObj.activate.value" :title="presentModal.subFormObj.activate.label" width="150">
            <template #default="{ row }">
              <el-switch v-model="row[presentModal.subFormObj.activate.value]" active-value="Y" inactive-value="N" />
            </template>
          </vxe-column>
          <vxe-column align="center" field="ADD_TIME" :title="translateTitle('Dams.ProcssConfig.操作')" width="180">
            <template #default="{ row }">
              <el-button type="text" @click="copy(row)">
                <vui-icon icon="file-copy-line" />
                {{ translateTitle('Dams.ProcssConfig.复制') }}
              </el-button>
              <el-button type="text" @click="save(row)">
                <vui-icon icon="save-line" />
                {{ translateTitle('Dams.ProcssConfig.保存') }}
              </el-button>
            </template>
          </vxe-column>
        </vxe-table>
        <template #footer>
          <div class="flex justify-center p-3 border-t border-gray-100">
            <el-button @click="dialogTableVisible = false">{{ translateTitle('Dams.ProcssConfig.取消') }}</el-button>
            <el-button type="primary" @click="onconfirm">{{ translateTitle('Dams.ProcssConfig.确定') }}</el-button>
          </div>
        </template>
      </VuiModal>
    </teleport>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { GFCD } from '@/utils/utils'
  import { apimRequest } from '../../../api/home'
  import debounce from 'lodash/debounce'
  import CodeEditor from '../../../components/codeEditor.vue'
  import cloneDeep from 'lodash/cloneDeep'
  export default {
    name: 'ProcessStart',
    components: { CodeEditor },
    // emits: ['startSubmit'],
    data() {
      return {
        nextLoading: false,
        type: '40',
        DBlist: [],
        step: 1,
        ruleForm: {},
        subForm: {
          ACTIVE_FLAG: 'Y',
        },
        portType: [],
        hierarchyList: [],
        inboundForm: {
          DATA_ACTION: '',
          LOG_EXPIRE_TIME: 180,
          LOG_FLAG: 'Y',
          // MESSAGE_TYPE: 'H',
        },
        inboundRules: {
          DATA_ACTION: [{ required: true, message: translateTitle('Dams.ProcssConfig.请选择接口类型'), trigger: 'blur' }],
          DATA_JNDI_NAME: [{ required: true, message: translateTitle('Dams.ProcssConfig.请输入地址'), trigger: 'blur' }],
        },
        inboundMsgForm: {
          MESSAGE_TYPE: 'H',
        },
        inboundMsgRules: {},
        outFormForm: {
          RESPONSE_MODEL: 'T',
          HTTP_CONFIG: '6000/6000',
          RESEND_CONFIG: '3/30000',
        },
        outFormRules: {
          OUT_DATA_ACTION: [{ required: true, message: translateTitle('Dams.ProcssConfig.请选择接口类型'), trigger: 'blur' }],
          OUT_JNDI_NAME: [{ required: true, message: translateTitle('Dams.ProcssConfig.请输入地址'), trigger: 'blur' }],
        },
        dialogTableVisible: false,
        rules: {
          MESSAGE_GROUP_ID: [{ required: true, message: translateTitle('Dams.ProcssConfig.请选择消息集'), trigger: 'blur' }],
          MESSAGE_ID: [{ required: true, message: translateTitle('Dams.ProcssConfig.请选择接口编码'), trigger: 'blur' }],
          INTERFACE_DESC: [{ required: true, message: translateTitle('Dams.ProcssConfig.请输入接口描述'), trigger: 'blur' }],
          ASSOCIATION_SYSTEM: [{ required: true, message: translateTitle('Dams.ProcssConfig.请选择所属系统'), trigger: 'change' }],
        },
        systemOptions: [
          { APP_CODE: 'DAMS', APP_NAME: 'DAMS' },
          { APP_CODE: 'WMS', APP_NAME: 'WMS' },
        ],
        modalList: [
          {
            subFormObj: {
              coding: { value: 'MESSAGE_GROUP_ID', label: translateTitle('Dams.ProcssConfig.消息集编码') },
              name: { value: 'MESSAGE_GROUP_NAME', label: translateTitle('Dams.ProcssConfig.组织名称') },
              activate: { value: 'ACTIVE_FLAG', label: translateTitle('Dams.ProcssConfig.是否有效') },
            },
          },
          {
            subFormObj: {
              coding: { value: 'MESSAGE_ID', label: translateTitle('Dams.ProcssConfig.接口编码') },
              name: { value: 'MESSAGE_DESC', label: translateTitle('Dams.ProcssConfig.接口名称') },
              activate: { value: 'ACTIVE_FLAG', label: translateTitle('Dams.ProcssConfig.是否有效') },
            },
          },
        ],
        presentModal: {},
        tableData: [],
        clientWidth: 0,
        thirdStep: [],
        hierarchyIndex: 0,
        treeNodeWidth: 100,
        tableList: [],
        tableTreeConfig: {
          transform: true,
          rowField: 'name',
          parentField: 'parent',
          indent: 30,
          expandAll: true,
          // reserve: true,
        },
        outgoingMessage: '',
        isAnalysis: false, //解析后是展示下面的表格
        openAnalysis: false, //解析是否展示
        strType: [],
        aduFlag: [],
        serialNumber: [],
        responsePattern: [
          { key: 'T', value: translateTitle('Dams.ProcssConfig.全量') },
          { key: 'S', value: translateTitle('Dams.ProcssConfig.成功') },
          { key: 'F', value: translateTitle('Dams.ProcssConfig.失败') },
        ],
        isVerifySql: false,
        isOrganization: true,
        editList: [],
        txtHint: [
          {
            key: '51',
            customOne: translateTitle('Dams.ProcssConfig.此处填写数据间分隔符1'),
            customTwo: translateTitle('Dams.ProcssConfig.此处填写数据组分隔符2'),
          },
          {
            key: '55',
            customOne: translateTitle('Dams.ProcssConfig.获取文件根路径'),
            customTwo: '',
          },
          {
            key: '57',
            customOne: translateTitle('Dams.ProcssConfig.获取文件根路径'),
            customTwo: '',
          },
        ],
        dbconfig: ['40', '42'],
        customOne: '',
        customTwo: '',
      }
    },
    computed: {
      getlabel() {
        if (this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) > -1) {
          return translateTitle('Dams.ProcssConfig.入向地址')
        } else if (this.inboundForm.DATA_ACTION == '99') {
          return translateTitle('Dams.ProcssConfig.自定义入口')
        } else {
          return false
        }
      },
      getWidth() {
        return `${this.clientWidth * 0.6}`
      },
    },
    watch: {
      step(val) {
        if (val == '2') {
          this.getPortType()
          this.openAnalysis = false
          this.isAnalysis = false
          this.hierarchyIndex = 0
        } else if (val == '3') {
          this.getHierarchy()
        } else if (val == '4') {
          this.getPortType()
          this.hierarchyIndex = 0
          this.getSerialNumber()
          this.getAduFlag()
          this.openAnalysis = false
          this.isAnalysis = false
        }
        this.$store.dispatch('apim/setStep', val)
      },
    },
    mounted() {
      window.onresize = () => {
        this.clientWidth = document.documentElement.clientWidth
        //屏幕尺寸变化
        // return (() => {
        //     this.screenWidth = document.body.clientWidth
        // })()
      }
    },
    created() {
      this.configSetting = GFCD('apim')
      this.windowResize()
      this.getSystem()
      if (this.$store.getters['apim/step'] == 4) {
        //从第五步回来需要从新请求回显数据
        this.step = this.$store.getters['apim/step']
        this.getP()
        this.getPortType()
      }
    },
    methods: {
      dataChange(val) {
        let reslut = this.txtHint.find((el) => el.key == val)
        if (reslut) {
          this.customOne = reslut.customOne
          this.customTwo = reslut.customTwo
        }
      },
      translateTitle,
      sourceChange(item) {
        item.name = item.STD_FIELD
      },
      async notDbAdd(row) {
        const $table = this.$refs['xTable_notDb']
        const record = {
          name: '',
          parent: row.name,
          isNode: 'N',
          hasElements: 'N',
          xpath: '',
          level: row.level,
          ADAPTER_TYPE: 'I',
          DATA_TYPE: 'string',
          isAdd: true,
          ACTIVE_FLAG: 'Y',
        }
        await $table.insert(record)
      },
      //根据组织编号和接口编号查询接口详情
      async getP() {
        if (!this.ruleForm.MESSAGE_GROUP_ID) {
          this.ruleForm.MESSAGE_GROUP_ID = this.$store.getters['apim/requiredForm'].MESSAGE_GROUP_ID
        }
        if (!this.ruleForm.MESSAGE_ID) {
          this.ruleForm.MESSAGE_ID = this.$store.getters['apim/requiredForm'].MESSAGE_ID
        }
        let url = `${this.configSetting.domain}/apim/config/stream/queryList`
        let res = await apimRequest(url, JSON.stringify({ MESSAGE_GROUP_ID: this.ruleForm.MESSAGE_GROUP_ID, MESSAGE_ID: this.ruleForm.MESSAGE_ID }), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        this.$store.dispatch('apim/setQueryData', res.data)
        if (Object.keys(res.data).length > 0) {
          if (!res.data?.messageConfigList) return
          const {
            INTERFACE_DESC,
            ASSOCIATION_SYSTEM,
            DATA_ACTION,
            DATA_JNDI_NAME,
            LOG_EXPIRE_TIME,
            DATA_PARAM,
            DATA_PARAM1,
            DATA_PARAM2,
            DATA_PARAM3,
            DATA_PARAM4,
            OUT_DATA_ACTION,
            OUT_JNDI_NAME,
            OUT_USER_CLASS,
            GET_DOC_NO_TYPE,
            BATCH_FLAG,
            IDU_FLAG,
            SOAP_VERSION,
            RESPONSE_MODEL,
            HTTP_CONFIG,
            RESEND_CONFIG,
            OUT_PARAM1,
            OUT_PARAM2,
            OUT_PARAM3,
            OUT_PARAM4,
            OUT_PARAM5,
            RETURN_MESSAGE_ID,
            LOG_FLAG,
          } = res.data?.messageConfigList[0]
          // const { VALUE_STR01 = '', VALUE_STR02 = '', VALUE_STR03 = '' } = res.data?.messageConfigValueList ? res.data?.messageConfigValueList[0] : {}
          if (res.data?.sendTableList) {
            //DB时层级回显数据
            this.thirdStep = res.data?.sendTableList
            this.thirdStep.forEach((r, i) => {
              if (i < this.thirdStep.length - 1) {
                r.isChild = 'Y'
              }
              if (i == this.thirdStep.length - 1) {
                r.isChild = 'N'
              }
            })
            console.log('this.thirdStep', this.thirdStep)
          }
          if (DATA_ACTION) {
            this.dataChange(DATA_ACTION)
          }
          //出向回显数据
          this.outFormForm = {
            OUT_DATA_ACTION,
            OUT_JNDI_NAME,
            OUT_USER_CLASS,
            GET_DOC_NO_TYPE,
            // VALUE_STR01,
            // VALUE_STR02,
            // VALUE_STR03,
            BATCH_FLAG,
            IDU_FLAG,
            SOAP_VERSION,
            RESPONSE_MODEL,
            HTTP_CONFIG,
            RESEND_CONFIG,
            OUT_PARAM1,
            OUT_PARAM2,
            OUT_PARAM3,
            OUT_PARAM4,
            OUT_PARAM5,
          }
          if (RETURN_MESSAGE_ID) {
            this.outFormForm.isChild = 'Y'
          } else {
            this.outFormForm.isChild = 'N'
          }
          this.ruleForm.INTERFACE_DESC = INTERFACE_DESC
          this.ruleForm.ASSOCIATION_SYSTEM = ASSOCIATION_SYSTEM
          //入向回显数据
          this.inboundForm = {
            DATA_ACTION,
            DATA_JNDI_NAME,
            LOG_EXPIRE_TIME,
            DATA_PARAM,
            DATA_PARAM1,
            DATA_PARAM2,
            DATA_PARAM3,
            DATA_PARAM4,
            LOG_FLAG: LOG_FLAG === 'N' ? LOG_FLAG : 'Y',
          }
          if (!this.inboundForm.LOG_EXPIRE_TIME) {
            this.inboundForm.LOG_EXPIRE_TIME = 180
          }
          if (DATA_ACTION == '40') {
            //DB时的节点元素回显数据（表格）
            if (res.data?.sendTableList && res.data?.messageConfigValueList) {
              let send = res.data.sendTableList.find((el) => el.MESSAGE_TYPE == 'H')
              let messageConfig = res.data.messageConfigValueList.find((el) => el.TYPE == '20')
              this.DBlist = []
              if (messageConfig) {
                for (let index = 2; index < 11; index++) {
                  if (messageConfig[`VALUE_STR0${index}`]) {
                    this.DBlist.push({
                      name: messageConfig[`VALUE_STR0${index}`].split('/')[messageConfig[`VALUE_STR0${index}`].split('/').length - 1],
                      WEB_RETURN_SUCCESS: index == 2 ? send.WEB_RETURN_SUCCESS : '',
                      ACTIVE_FLAG: 'Y',
                      identification: index == 2 ? 'Y' : 'N',
                      xpath: messageConfig[`VALUE_STR0${index}`],
                      WEB_RETURN_FIELDS: send.WEB_RETURN_FIELDS ? send.WEB_RETURN_FIELDS.split('/')[index - 2] : '',
                    })
                  }
                }
              }
              this.rootNode = {
                name: messageConfig.VALUE_STR01.split('/')[messageConfig.VALUE_STR01.split('/').length - 1],
                isNode: 'Y',
                hasElements: 'Y',
              }
            }
            this.DBlist.forEach((r) => {
              if (r.identification != 'Y') {
                r.disabled = true
              } else {
                r.disabled = false
              }
            })
            console.log(this.DBlist, this.rootNode)
          } else {
            //非DB时的节点元素回显数据（树形表格）
            if (res.data?.messageStructureList && res.data?.messageXmlList) {
              let messageStructure = res.data.messageStructureList.filter((el) => el.ADAPTER_TYPE == 'I')
              let messageXml = res.data.messageXmlList.filter((el) => el.ADAPTER_TYPE == 'I')
              let messageR = res.data.messageXmlList.find((el) => el.ADAPTER_TYPE == 'R')
              // let list = messageStructure.concat()
              messageStructure.forEach((r) => {
                r.name = r.XPATH_EXPRESS.split('/')[r.XPATH_EXPRESS.split('/').length - 1]
                r.parent = ''
                r.isNode = 'Y'
                r.hasElements = 'Y'
                r.xpath = r.XPATH_EXPRESS
                r.level = r.MESSAGE_TYPE
                r.conditions = r.PARENT_ELEMENT
              })
              messageXml.forEach((r) => {
                if (messageR && messageR.MESSAGE_TYPE == r.MESSAGE_TYPE && messageR.STD_FIELD == r.STD_FIELD) {
                  r.ADAPTER_TYPE = 'R'
                }
                r.xpath = r.XPATH_EXPRESS
                r.isNode = 'N'
                r.level = r.MESSAGE_TYPE
                r.name = r.XPATH_EXPRESS.split('/')[r.XPATH_EXPRESS.split('/').length - 1]
                let findObj = messageStructure.find((el) => el.MESSAGE_TYPE == r.MESSAGE_TYPE)
                if (findObj) {
                  r.parent = findObj.XPATH_EXPRESS.split('/')[findObj.XPATH_EXPRESS.split('/').length - 1]
                }
              })
              this.tableList = messageStructure.concat(messageXml)
            }
          }
          console.log(this.DBlist, this.tableList)
        } else {
          this.thirdStep = []
          this.inboundForm = { LOG_EXPIRE_TIME: 180, LOG_FLAG: 'Y' }
          this.DBlist = []
          this.tableList = []
          this.ruleForm.INTERFACE_DESC = ''
          this.ruleForm.ASSOCIATION_SYSTEM = ''
        }
      },
      levelChange(e) {
        console.log(e)
        this.tableList.forEach((r) => {
          if (r.parent == e.name && r.isNode == 'N') {
            r.level = e.level
          }
        })
      },
      //第四步流水号规则下拉数据
      async getSerialNumber() {
        let url = `${this.configSetting.domain}/apim/config/stream/list/serialNum`
        let res = await apimRequest(url, JSON.stringify({}), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        this.serialNumber = res.data
      },
      //第四步增删改下拉数据
      async getAduFlag() {
        let url = `${this.configSetting.domain}/apim/config/stream/list/aduFlag`
        let res = await apimRequest(url, JSON.stringify({}), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        this.aduFlag = res.data
      },
      //第三步非DB获取字段类型
      async getDataType() {
        let url = `${this.configSetting.domain}/apim/config/stream/list/dataType`
        let res = await apimRequest(url, JSON.stringify({}), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        this.strType = res.data
        this.$nextTick(() => {
          console.log(this.$refs['xTable_notDb'])
          this.$refs['xTable_notDb'].setAllTreeExpand(true)
        })
      },
      identificationChange(e) {
        this.DBlist.forEach((r) => {
          if (r.identification != 'Y' && e == 'Y') {
            r.disabled = true
          }
          if (e == 'N') {
            r.disabled = false
          }
        })
      },
      //第三步解析
      async analysis() {
        let url = `${this.configSetting.domain}/apim/config/stream/parse/message`
        let res = await apimRequest(
          url,
          JSON.stringify({
            message: this.outgoingMessage,
          }),
          {
            'Content-Type': 'application/json',
          }
        )
        this.rootNode = res.data.find((el) => el.isNode == 'Y' && el.hasElements == 'Y')
        if (this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) == -1) {
          this.tableList = res.data
          console.log(this.tableList)
          let arr = cloneDeep(this.tableList)
          arr.forEach((r) => {
            r._level = r.xpath.split('/').length
          })
          arr.sort((a, b) => {
            return b._level - a._level
          })
          console.log(arr)
          this.treeNodeWidth = arr[0]._level * 30
          this.tableList.forEach((r) => {
            r.DATA_TYPE = 'STRING'
            r.ACTIVE_FLAG = 'Y'
            r.ADAPTER_TYPE = 'I'
            r.ALLOW_EMPTY_FLAG = 'Y'
            if (this.tableList.find((el) => el.name == r.parent) && this.tableList.find((el) => el.name == r.parent).level && r.isNode == 'N') {
              r.level = this.tableList.find((el) => el.name == r.parent).level
            }
            if (r.isNode == 'N') {
              r.xpath = './' + r.name
            }
            r.STD_FIELD = r.name.toUpperCase()
          })
          this.getDataType()
        } else {
          this.DBlist = res.data.filter((el) => el.isNode == 'N')
          this.DBlist.forEach((r) => {
            r.ACTIVE_FLAG = 'Y'
          })
          // this.rootNode = res.data.find((el) => el.parent == null).xpath
        }
        this.isAnalysis = true
        console.log(this.DBlist, this.tableList)
      },
      windowResize: debounce(function () {
        console.log('document.documentElement.clientHeight', document.documentElement.clientWidth)
        this.clientWidth = document.documentElement.clientWidth
      }, 100),
      //SQL验证
      async verifySql() {
        let url = `${this.configSetting.domain}/apim/config/stream/parse/sql`
        let res = await apimRequest(url, JSON.stringify({ SQL: this.inboundMsgForm.SELECT_SQL, DATA_JNDI_NAME: this.inboundForm.DATA_JNDI_NAME }), {
          'Content-Type': 'application/json',
        })
        console.log(this.thirdStep, this.hierarchyIndex)
        // if (this.thirdStep.length - 1 > this.hierarchyIndex) {
        this.thirdStep[this.hierarchyIndex].JNDI_NAME = res.data
        // } else {
        // this.thirdStep[this.hierarchyIndex - 1].JNDI_NAME = res.data
        // }
        this.isVerifySql = true
        this.$message({ message: translateTitle('Dams.ProcssConfig.校验SQL成功'), type: 'success' })
        console.log(this.thirdStep)
      },
      //第一步获取所属系统
      async getSystem() {
        this.systemOptions = []
        let url = `${this.configSetting.domain}/apim/config/stream/list/systemApps`
        let res = await apimRequest(url, JSON.stringify({}), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        res.data.forEach((r) => {
          this.systemOptions.push({ APP_CODE: r, APP_NAME: r })
        })
      },
      //第一步弹框复制
      async copy(item) {
        let { MESSAGE_GROUP_ID, MESSAGE_GROUP_NAME, ACTIVE_FLAG } = item
        const $table = this.$refs['xTable']
        const record = {
          ACTIVE_FLAG: ACTIVE_FLAG,
          MESSAGE_GROUP_ID: MESSAGE_GROUP_ID,
          MESSAGE_GROUP_NAME: MESSAGE_GROUP_NAME,
        }
        const { row: newRow } = await $table.insert(record)
        $table.setEditCell(newRow, 'sex')
      },
      //第一步弹框保存
      async save(item) {
        console.log(item)
        console.log(!item.ADD_TIME)
        console.log(!('ADD_TIME' in item))
        if (!('ADD_TIME' in item) || !item.ADD_TIME) {
          //新增
          let url = ''
          if (this.presentModal.subFormObj.coding.value == 'MESSAGE_ID') {
            //接口的
            url = `${this.configSetting.domain}/apim/config/stream/add/messageId`
          } else {
            //组织的
            url = `${this.configSetting.domain}/apim/config/stream/add/messageGroupId`
          }
          await apimRequest(url, JSON.stringify(item), {
            'Content-Type': 'application/json',
          })
          this.$baseMessage(translateTitle('Dams.ProcssConfig.保存成功'), 'success')
          this.onSubmit()
        } else {
          //编辑
          let url = ''
          if (this.presentModal.subFormObj.coding.value == 'MESSAGE_ID') {
            //接口的
            url = `${this.configSetting.domain}/apim/config/stream/update/messageId`
          } else {
            //组织的
            url = `${this.configSetting.domain}/apim/config/stream/update/messageGroupId`
          }
          await apimRequest(url, JSON.stringify(item), {
            'Content-Type': 'application/json',
          })
          this.$baseMessage(translateTitle('Dams.ProcssConfig.保存成功'), 'success')
          this.onSubmit()
        }
      },
      //第一步弹框搜索
      async onSubmit() {
        let url = ''
        if (this.presentModal.subFormObj.coding.value == 'MESSAGE_ID') {
          //接口的
          url = `${this.configSetting.domain}/apim/config/stream/query/messageId`
        } else {
          //组织的
          url = `${this.configSetting.domain}/apim/config/stream/query/messageGroupId`
        }
        let res = await apimRequest(url, JSON.stringify(this.subForm), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        if (res.code == '0000') {
          this.tableData = res.data
        } else {
          this.$baseMessage(res.message, 'error')
        }
      },
      //第一步弹框增加组织
      async addOrganization() {
        const $table = this.$refs['xTable']
        const record = {
          ACTIVE_FLAG: 'Y',
          MESSAGE_GROUP_ID: '',
          MESSAGE_GROUP_NAME: '',
        }
        await $table.insert(record)
        // const { row: newRow } = await $table.insert(record)
        // $table.setEditCell(newRow, 'sex')
      },
      //第一步弹框删除组织
      deleteOrganization(r, c) {
        console.log(r, c)
        this.$confirm(
          translateTitle('Dams.ProcssConfig.您确定要删除吗'),
          translateTitle('Dams.ProcssConfig.是否继续'),
          translateTitle('Dams.ProcssConfig.提示'),
          {
            confirmButtonText: translateTitle('Dams.ProcssConfig.确定'),
            cancelButtonText: translateTitle('Dams.ProcssConfig.取消'),
            type: 'warning',
          }
        )
          .then(async () => {
            let url = ''
            if (this.presentModal.subFormObj.coding.value == 'MESSAGE_ID') {
              //接口的
              url = `${this.configSetting.domain}/apim/config/stream/delete/messageId`
            } else {
              //组织的
              url = `${this.configSetting.domain}/apim/config/stream/delete/messageGroupId`
            }
            await apimRequest(url, JSON.stringify(r), {
              'Content-Type': 'application/json',
            })
            this.$baseMessage(translateTitle('Dams.ProcssConfig.删除成功'), 'success')
            this.onSubmit()
          })
          .catch(() => {
            this.$baseMessage(translateTitle('Dams.ProcssConfig.已取消删除'), 'info')
          })
      },
      //第一步弹框确认
      onconfirm() {
        const $table = this.$refs['xTable'].getRadioRecord()
        console.log($table)
        if (!$table) return this.$baseMessage(translateTitle('Dams.ProcssConfig.未选择数据'), 'error')
        if (!$table.ADD_TIME && !$table.ADD_WHO) return this.$baseMessage(translateTitle('Dams.ProcssConfig.请先保存'), 'error')
        this.ruleForm[this.presentModal.subFormObj.coding.value] = $table[this.presentModal.subFormObj.coding.value]
        this.$refs.ruleForm.validateField(this.presentModal.subFormObj.coding.value, (err) => {
          console.log(err)
        })
        if (this.ruleForm.MESSAGE_GROUP_ID && this.ruleForm.MESSAGE_ID) {
          this.getP()
        }
        this.dialogTableVisible = false
      },
      //第一步弹框搜索
      searchForm() {
        this.onSubmit()
      },
      //第一步清空组织
      clearFormDataModel1() {
        this.ruleForm.ORGANIZATION_ID = ''
      },
      //第一步清空接口
      clearFormDataModel2() {
        this.ruleForm.codeing = ''
      },
      //第一步打开组织弹框
      clickOpen1() {
        this.dialogTableVisible = true
        this.presentModal = this.modalList[0]
        this.isOrganization = true
        this.onSubmit()
      },
      //第一步打开接口弹框
      clickOpen2() {
        this.dialogTableVisible = true
        this.presentModal = this.modalList[1]
        this.isOrganization = false
        this.onSubmit()
      },
      //上一步
      lastStep() {
        if (this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) > -1) {
          if (this.step == 4) {
            this.openAnalysis = true
            this.isAnalysis = true
            this.step--
          } else if (this.step == 3) {
            console.log('inboundMsgForm', this.step, this.openAnalysis, this.hierarchyIndex, this.thirdStep)
            if (this.openAnalysis) {
              this.openAnalysis = false
            } else {
              if (this.hierarchyIndex == 0) {
                this.step--
              } else {
                this.hierarchyIndex--
                this.inboundMsgForm = this.thirdStep[this.hierarchyIndex]
              }
            }
          } else {
            this.step--
          }
        } else {
          if (this.step == 4) {
            this.openAnalysis = true
            this.isAnalysis = true
          }
          this.step--
        }
      },
      async getPortType() {
        let url = `${this.configSetting.domain}/apim/config/stream/list/adapterType`
        let res = await apimRequest(url, JSON.stringify({}), {
          'Content-Type': 'application/json',
        })
        // console.log(res)'54' '91'
        if (this.step == 2) {
          this.portType = res.data.filter((el) => el.value != '54' && el.value != '91')
        } else if (this.step == 4) {
          if (this.inboundForm.DATA_ACTION == '42') {
            this.portType = res.data.filter((el) => el.value == '54')
          } else {
            this.portType = res.data.filter((el) => el.value != '42')
          }
        }
      },
      //第三步打开层级时的
      getHierarchyFrom() {
        console.log('***********', this.hierarchyList, this.hierarchyIndex)
        if (this.thirdStep.length - 1 > this.hierarchyIndex) {
          this.setThirdStep()
        } else {
          let flag = this.hierarchyList[this.hierarchyIndex + 1] ? this.hierarchyList[this.hierarchyIndex + 1].value : ''
          if (this.thirdStep.length > 0 && !this.thirdStep[this.thirdStep.length - 1].CHILDREN_TYPE) {
            let index = this.hierarchyList.findIndex((el) => el.value == this.thirdStep[this.thirdStep.length - 1].MESSAGE_TYPE)
            this.thirdStep[this.thirdStep.length - 1].CHILDREN_TYPE = this.hierarchyList[index + 1].value
          }
          this.thirdStep.push({
            MESSAGE_TYPE: this.hierarchyList[this.hierarchyIndex].value,
            PRE_SP: '',
            isChild: 'N',
            CHILDREN_TYPE: flag,
            SELECT_SQL: '',
            KEY_FIELD: '',
            FLAG_FIELD: '',
            RETURN_VALUES: '',
            JNDI_NAME: [],
            ...this.ruleForm,
            ...this.inboundForm,
          })
          console.log(this.thirdStep)

          this.inboundMsgForm = this.thirdStep[this.hierarchyIndex]
          this.isVerifySql = false
        }
        console.log(this.thirdStep)
      },
      //第三步层级完成后的提交
      async saveInbound() {
        let index = this.thirdStep.findIndex((el) => el.isChild == 'N')
        if (index < this.thirdStep.length - 1) {
          this.thirdStep.splice(index + 1, this.thirdStep.length - index)
        }
        if (this.thirdStep.length == 1) {
          this.thirdStep[0].CHILDREN_TYPE = ''
        } else {
          this.thirdStep[this.thirdStep.length - 1].CHILDREN_TYPE = ''
        }
        let url = `${this.configSetting.domain}/apim/config/stream/add/sendStd`
        let res = await apimRequest(url, JSON.stringify(this.thirdStep), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        // this.isAnalysis = true
        // this.openAnalysis = true
        // console.log(this.DBlist)
        // console.log(this.thirdStep)
        // console.log(this.hierarchyIndex)
        // if (this.DBlist.length > 0) {
        //   this.isAnalysis = true
        // }
      },
      setThirdStep() {
        this.inboundMsgForm = this.thirdStep[this.hierarchyIndex]
      },
      //第三步获取层级
      async getHierarchy() {
        let url = `${this.configSetting.domain}/apim/config/stream/list/levels`
        let res = await apimRequest(url, JSON.stringify({}), {
          'Content-Type': 'application/json',
        })
        console.log(res)
        this.hierarchyList = res.data
        if (this.thirdStep.length > 0) {
          this.setThirdStep()
        } else {
          this.thirdStep = []
          this.hierarchyIndex = 0
          this.getHierarchyFrom()
        }

        console.log(this.inboundMsgForm)
      },
      //组织机构ID、接口ID、层级List、来源字段（未知，提示：通过SQL校验返回）
      parametersJoin() {
        // if (!this.isAnalysis) return this.$message({ message: `请先解析报文`, type: 'error' })
        if (this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) > -1) {
          if (this.isAnalysis && this.DBlist.length > 0) {
            let list = cloneDeep(this.DBlist)
            let arrList = list.filter((el) => el.ACTIVE_FLAG == 'Y')
            if (arrList.length == 0) return this.$message({ message: translateTitle('Dams.ProcssConfig.请打开是否生效再提交'), type: 'error' })
            let obj = {}
            let sub = {}
            let WEB_RETURN_FIELDS = '' //最终响应字段的拼接
            let WEB_RETURN_SUCCESS = '' //identification==Y的标识
            console.log(cloneDeep(arrList))
            for (let index = 0; index < arrList.length; index++) {
              if (arrList[index].identification == 'Y') {
                obj = arrList[index]
              }
            }
            let index = arrList.findIndex((el) => el.identification == 'Y')
            arrList.splice(index, 1)
            arrList.forEach((r, i) => {
              WEB_RETURN_FIELDS += r.WEB_RETURN_FIELDS + '/'
              if (Object.keys(obj).length > 0) {
                // sub.VALUE_STR02 = obj.xpath.replace(this.rootNode, '/')
                sub.VALUE_STR02 = './' + obj.name
              }
              if (sub.VALUE_STR02) {
                // sub['VALUE_STR0' + (i + 3)] = r.xpath.replace(this.rootNode, '/')
                sub['VALUE_STR0' + (i + 3)] = './' + r.name
              }
            })
            if (this.rootNode.isNode == 'Y') {
              sub.VALUE_STR01 = '//' + this.rootNode.name
            }
            WEB_RETURN_SUCCESS = obj.WEB_RETURN_SUCCESS
            console.log({ WEB_RETURN_FIELDS: obj.WEB_RETURN_FIELDS + '/' + WEB_RETURN_FIELDS, WEB_RETURN_SUCCESS: WEB_RETURN_SUCCESS, ...sub })
            this.DBsave({
              WEB_RETURN_FIELDS: (obj.WEB_RETURN_FIELDS + '/' + WEB_RETURN_FIELDS).substring(
                0,
                (obj.WEB_RETURN_FIELDS + '/' + WEB_RETURN_FIELDS).length - 1
              ),
              WEB_RETURN_SUCCESS: WEB_RETURN_SUCCESS,
              ...sub,
              MESSAGE_GROUP_ID: this.ruleForm.MESSAGE_GROUP_ID ? this.ruleForm.MESSAGE_GROUP_ID : 'APIM_TEST',
              MESSAGE_ID: this.ruleForm.MESSAGE_ID ? this.ruleForm.MESSAGE_ID : 'ASN_CF',
              ACTIVE_FLAG: 'Y',
            })
          } else {
            this.step++
            this.saveInbound()
          }
        } else {
          if (!this.isAnalysis) return this.$message({ message: translateTitle('Dams.ProcssConfig.请先解析报文'), type: 'error' })
          // let editList = []
          const $table = this.$refs['xTable_notDb']
          if ($table.getInsertRecords().length > 0) {
            this.editList = $table.getInsertRecords()
          }
          let list = cloneDeep(this.tableList)
            .filter((el) => el.isNode == 'N')
            .concat(this.editList)
          if (list.length == 0) return this.$message({ message: translateTitle('Dams.ProcssConfig.请打开是否激活再提交'), type: 'error' })
          let open = false
          list.forEach((r) => {
            r.MESSAGE_TYPE = r.level
            r.XPATH_EXPRESS = r.xpath
            // r.STD_FIELD = r.STD_FIELD ? r.STD_FIELD : r.name.toUpperCase()
            r.MESSAGE_GROUP_ID = this.ruleForm.MESSAGE_GROUP_ID ? this.ruleForm.MESSAGE_GROUP_ID : 'APIM_TEST'
            r.MESSAGE_ID = this.ruleForm.MESSAGE_ID ? this.ruleForm.MESSAGE_ID : 'ASN_CF'
            if (!r.STD_FIELD) {
              open = true
            }
          })
          if (open) return this.$message({ message: translateTitle('Dams.ProcssConfig.请填写完整来源字段'), type: 'error' })
          this.NotDBsave(list)
        }
      },
      getXpath(r, Hpath) {
        console.log(Hpath)
        let str = ''
        if (r.level == 'H') {
          str = '//' + r.name
        } else {
          str = r.xpath.replace(Hpath, '.')
        }
        return str
      },
      //第三步非DB提交
      async NotDBsave(p) {
        console.log(p)
        let list = []
        p.forEach((r) => {
          if (r.ADAPTER_TYPE == 'R') {
            list.push({ ...r, ADAPTER_TYPE: 'I' })
          }
        })
        console.log(this.tableList)
        this.nextLoading = true
        let url = `${this.configSetting.domain}/apim/config/stream/add/fieldXml`
        let res = await apimRequest(url, JSON.stringify(p.concat(list)), {
          'Content-Type': 'application/json',
        })
        let hpath = this.tableList.find((el) => el.level == 'H' && el.isNode == 'Y').xpath
        let arr = []
        this.tableList.forEach((r) => {
          if (r.isNode == 'Y' && r.hasElements == 'Y' && r.level) {
            arr.push({
              ...r,
              MESSAGE_GROUP_ID: this.ruleForm.MESSAGE_GROUP_ID,
              MESSAGE_ID: this.ruleForm.MESSAGE_ID,
              XPATH_EXPRESS: this.getXpath(r, hpath),
              MESSAGE_TYPE: r.level,
            })
          }
        })
        arr.forEach((r) => {
          delete r._X_ROW_CHILD
          delete r.children
          if (r.conditions) {
            r.PARENT_ELEMENT = r.conditions
          }
        })
        await apimRequest(`${this.configSetting.domain}/apim/config/stream/in/add/structure`, JSON.stringify(arr), {
          'Content-Type': 'application/json',
        })
        this.nextLoading = false
        console.log(res)
        this.step++
      },
      //第三步DB提交
      async DBsave(p) {
        this.thirdStep[0].WEB_RETURN_SUCCESS = p.WEB_RETURN_SUCCESS
        this.thirdStep[0].WEB_RETURN_FIELDS = p.WEB_RETURN_FIELDS
        await this.saveInbound()
        this.nextLoading = true
        let url = `${this.configSetting.domain}/apim/config/stream/db/writeBack`
        let res = await apimRequest(url, JSON.stringify(p), {
          'Content-Type': 'application/json',
        })
        this.nextLoading = false
        console.log(res)
        this.step++
      },
      async saveMsgConfig() {
        console.log(this.inboundForm, this.outFormForm)
        this.nextLoading = true
        let url = `${this.configSetting.domain}/apim/config/stream/add/config`
        let res = await apimRequest(
          url,
          JSON.stringify({
            ...this.outFormForm,
            ...this.inboundForm,
            ...this.ruleForm,
          }),
          {
            'Content-Type': 'application/json',
          }
        )
        this.nextLoading = false
        console.log(res)
        this.step++
        let list = []
        let arr = []
        if (this.tableList.length > 0) {
          list = this.hierarchyList.length > 0 ? cloneDeep(this.hierarchyList) : cloneDeep(this.$store.getters['apim/requiredForm'].hierarchyList)
          arr = this.tableList.concat(this.editList).filter((el) => el.ACTIVE_FLAG == 'Y' && el.isNode == 'N')
          list.forEach((r) => {
            r.JNDI_NAME = []
            if (arr.filter((el) => el.level == r.value)) {
              r.JNDI_NAME = arr.filter((el) => el.level == r.value).map((e) => e.STD_FIELD.toUpperCase())
              r.MESSAGE_TYPE = r.value
            }
          })
          list = list.filter((e) => e.JNDI_NAME.length > 0)
        }
        console.log(this.tableList, this.hierarchyList, list)
        this.$store.dispatch('apim/setRequiredForm', {
          MESSAGE_ID: this.ruleForm.MESSAGE_ID,
          MESSAGE_GROUP_ID: this.ruleForm.MESSAGE_GROUP_ID,
          DBlevelList: this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) > -1 ? this.thirdStep : list,
          DATA_ACTION: this.outFormForm.OUT_DATA_ACTION,
          stepTwoDATA_ACTION: this.inboundForm.DATA_ACTION,
          isCallBack: this.outFormForm.isChild,
          hierarchyList: this.hierarchyList,
        })
      },
      getFormName() {
        let str = ''
        switch (this.step) {
          case 1:
            str = 'ruleForm'
            break
          case 2:
            str = 'inboundForm'
            break
          case 3:
            str = 'inboundMsgForm'
            break
          case 4:
            str = 'outFormForm'
            break
        }
        return str
      },
      //下一步
      submitForm() {
        if (this.step == '3') {
          if (this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) > -1) {
            //DB
            // this.getHierarchy()
            if (this.openAnalysis) {
              this.parametersJoin()
            } else {
              if (!this.isVerifySql || !this.inboundMsgForm.SELECT_SQL)
                return this.$message({ message: translateTitle('Dams.ProcssConfig.请输入SQL或者校验SQL'), type: 'error' })
              if (this.inboundMsgForm.isChild == 'Y') {
                if (this.hierarchyIndex == this.hierarchyList.length - 1)
                  return this.$message({
                    message: `${translateTitle('Dams.ProcssConfig.不能超过')}${this.hierarchyList.length}${translateTitle('Dams.ProcssConfig.层')}`,
                    type: 'error',
                  })
                if (!this.inboundMsgForm.LOCAL_KEY_FIELD)
                  return this.$message({ message: translateTitle('Dams.ProcssConfig.请输入层级关联字段'), type: 'error' })
                this.hierarchyIndex++
                this.getHierarchyFrom()
              } else {
                this.openAnalysis = true
                if (this.DBlist.length > 0) {
                  this.isAnalysis = true
                }
                // this.saveInbound()
              }
            }
          } else {
            this.parametersJoin()
          }
        } else {
          this.$refs[this.getFormName()].validate((valid) => {
            if (valid) {
              if (this.step == '2') {
                if (this.dbconfig.indexOf(this.inboundForm.DATA_ACTION) > -1) {
                  //DB
                } else {
                  //非DB
                  this.openAnalysis = true
                  if (this.tableList.length > 0) {
                    this.isAnalysis = true
                    this.getDataType()
                  }
                }
                this.step++
              } else if (this.step == '4') {
                this.saveMsgConfig()
                //第四步
              } else {
                this.step++
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 50px);
    overflow-y: auto;
  }
  .btns {
    height: 50px;
  }
  .inbound-ruleForm,
  .outForm-ruleForm {
    display: flex;
    flex-wrap: wrap;
  }
  :deep() {
    .outForm-ruleForm {
      .el-form-item {
        width: 33%;
      }
    }
    .searchForm-modal {
      .el-form-item {
        width: auto;
        vertical-align: middle;
      }
    }
    .tree-table-list {
      .el-input__inner {
        height: 20px;
        line-height: 20px;
      }
    }
    .inbound-ruleForm {
      .el-form-item {
        width: 50%;
        margin-bottom: 10px;
      }
      .el-input-number .el-input__inner {
        border: 1px solid #dcdfe6;
      }
    }
  }
</style>
